<template>
	<view class="page-b">
		<tn-nav-bar fixed customBack :bottomShadow="false" backgroundColor="#FFFFFF">
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
			<view class="tn-flex tn-flex-col-center tn-flex-row-center ">
				<text class="tn-text-bold tn-text-xl tn-color-black">音频列表</text>
			</view>
		</tn-nav-bar>

		<view class="tn-classify__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<!-- 搜索框 -->
			<view class="tn-search-fixed">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin" :style="{marginTop: 10 + 'px'}">

					<view class="justify-content-item align-content-item" style="width: 100vw;">
						<view class="tn-flex tn-flex-col-center"
							style="border-radius: 100rpx;padding: 10rpx 20rpx 10rpx 20rpx;width: 100%;background-color: rgba(248, 247, 248, 0.9);">
							<text class="tn-icon-search justify-content-item tn-padding-right-xs tn-color-gray tn-text-lg"></text>
							<input class="justify-content-item" placeholder="想搜点什么咧" name="input" @input="searchInput"
								placeholder-style="color:#AAAAAA" style="width: 90%;"></input>
						</view>
					</view>

					<view class="align-content-item">
						<view class="justify-content-item tn-text-center">
							<tn-button backgroundColor="#3668fc" shape="round" padding="20rpx 20rpx" width="150rpx"
								@click="audioSearch">
								<text class="tn-color-white">搜 索</text>
							</tn-button>
						</view>
					</view>
				</view>
			</view>
			<!-- 搜索框结束 -->

			<!-- 音频列表开始 -->
			<view class="tn-flex tn-flex-wrap tn-flex-row-between tn-flex-col-center  tn-margin tn-bg-white">
				<block v-for="(item,index) in audioItems">
					<view class="justify-content-item tn-margin-bottom">
						<view class="tn-flex tn-flex-col-center tn-flex-row-left">
							<view class="tn-margin-top-xs tn-margin-right">
								<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
									<view>
										<image :src="item.cover" style="width: 80rpx; height: 80rpx;border-radius: 50%;"></image>
									</view>
								</view>
							</view>
							<view class="tn-color-black" style="width: 400rpx;">
								<view class="tn-padding-left-sm tn-text-md">
									<text class="">{{ item.title }}</text>
								</view>
								<view
									class="tn-padding-right tn-padding-top-xs tn-text-sm tn-padding-left-sm tn-text-ellipsis tn-color-gray">
									{{ item.remark }}
								</view>
							</view>
						</view>
					</view>
					<view class="justify-content-item tn-flex-row-center" @click="payAudioBtn(item)">
						<tn-button shape="round" backgroundColor="#3668fc" fontColor="#3668fc" :plain="true" width="70"
							fontSize="24">播 放</tn-button>
					</view>
				</block>
			</view>
			<!-- 音频列表结束 -->
		</view>

		<view class='tn-tabbar-height'></view>

		<view v-if="showScropTop">
			<nav-index-button></nav-index-button>
		</view>
	</view>

</template>

<script>
	import NavIndexButton from '@/libs/components/nav-index-button.vue'
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import { audioList	} from "@/utils/api/audio.js"
	export default {
		name: 'AudioList',
		components: {
			NavIndexButton,
		},
		mixins: [template_page_mixin],
		data() {
			return {
				audioItems: [],
				searchWhere: {
					size: 20,
					title: "",
					page: 1,
					tag_uid: "",
				},
				showScropTop: false,
			}
		},
		onLoad(params) {
			this.searchWhere.tag_uid = params.cate_uid || ""
			this.getAudiList()
		},
		methods: {
			getAudiList() {
				audioList(this.searchWhere).then(res => {
					if (res.code === 100) {
						this.audioItems.push(...res.data.items)
						this.searchWhere.page = res.data.page
						return
					}
					this.$func.showToast(res.msg)
				})
			},
			payAudioBtn(item) {
				uni.navigateTo({
					url: "/pageAudio/play/index?uid=" + item.uid
				})
			},
			searchInput(e) {
				this.searchWhere.title = e.detail.value
			},
			audioSearch() {
				if (this.searchWhere.title !== "") {
					this.searchWhere.page = 1
				}
				this.audioItems = []
				this.getAudiList()
			},
		},
		onReachBottom() {
			this.searchWhere.page += 1
			this.getAudiList()
		},
		onPageScroll(e) {
			if (e.scrollTop > 2000) {
				this.showScropTop = true
			} else {
				this.showScropTop = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-b {
		max-height: 100vh;
	}

	// 音频封面旋转开始
	/* 旋转动画 指定class为trun即可使用*/
	.turn {
		animation: turn 10s linear infinite;
	}

	/* 
	turn : 定义的动画名称
	10s : 动画时间
	linear : 动画平滑
	infinite :使动画无限循环
	transform:rotate(旋转角度)
	%0:动画开始
	%100:动画结束
	*/
	@keyframes turn {
		0% {
			transform: rotate(0deg);
		}

		20% {
			transform: rotate(72deg);
		}

		40% {
			transform: rotate(144deg);
		}

		60% {
			transform: rotate(216deg);
		}

		80% {
			transform: rotate(288deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	// 音频封面旋转结束


	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 30rpx;
			margin-right: 10rpx;
			flex-basis: 5%;
			width: 100rpx;
			position: absolute;
		}
	}

	.audio-play-container {
		height: 60%;
	}

	.audio-play-cover {
		height: 40%;
	}

	.left-width {
		flex-basis: 28%;
	}

	/* 自定义导航栏内容 end */
	.tn-classify {

		/* 搜索栏 start */
		&__search {
			&--wrap {}

			&__box {
				flex: 1;
				text-align: center;
				padding: 20rpx 30rpx;
				margin: 0 30rpx;
				border-radius: 60rpx;
				font-size: 30rpx;
			}

			&__icon {
				padding-right: 10rpx;
			}

			&__text {
				padding-right: 10rpx;
			}
		}

		/* 搜索栏 end */
	}
</style>